<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/static/home/js/jquery.min.js"></script>
    <title>开柜工作台</title>
    <style>
        body {
            border: 0;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: url("/static/home/images/bg_door_work.png");
            background-color: #04112f;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .btn_area {
            width: 900px;
            height: 100px;
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .btn_area > div {
            width: 420px;
            height: 100px;
            cursor: pointer;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
            font-size: 60px;
            color: rgba(255,255,255,0.8);
        }
        .btn_area .btn_get {
            float: left;
            background: url('/static/home/images/get.png');
        }
        .btn_area .btn_back {
            float: right;
            background: url('/static/home/images/back.png');
        }
        .screen {
            width: 80px;
            height: 30px;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .screen img {
            width: 30px;
            height: 30px;
            float: left;
            border: 0;
            cursor: pointer;
            outline: none;
        }
        .screen img:last-child {
            margin-left: 20px;
        }

        .mask {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            background-color: rgba(0,0,0,0.6);
        }
        .mask > img {
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%);
        }
        .result-mask {
            display: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            background-color: rgba(0,0,0,0.6);
        }
        .result {
            width: 600px;
            height: 600px;
            top: 59%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%);
        }
        .result .result-title {
            width: 100%;
            height: 80px;
            line-height: 64px;
            text-align: center;
            margin-bottom: 70px;
        }
        .result .result-title .result-center {
            display: block;
            width: 343px;
            left: 50%;
            position: relative;
            transform: translate(-50%, 0);
        }
        .result .result-title *{
            float: left;
        }
        .result .result-title .door {
            width: 65px;
            height: 64px;
            margin-top: 6px;
        }
        .result .result-title span {
            height: 80px;
            line-height: 80px;
            font-size: 66px;
            color: #fff;
            margin-left: 11px;
        }
        .result .form-item {
            line-height: 64px;
            width: 100%;
            height: 64px;
            color: #fff;
            box-sizing: border-box;
            margin-bottom: 60px;
        }
        .result .form-item div{float: left}
        .result .form-item .item-title {
            height: 64px;
            width: 110px;
            font-size: 38px;
            text-align: right;
            clear: both;
            box-sizing: border-box;
        }
        .result .form-item .item-content {
            margin-left: 34px;
            width: 418px;
            height: 64px;
            font-size: 38px;
            border-radius: 5px;
            box-sizing: border-box;
            padding-left: 27px;
            background-color: rgba(255,255,255,0.5);
        }
        .result .msg {
            color: #fff;
            text-align: center;
            font-size: 26px;
            display: block;
            margin-top: 40px;
            height: 64px;
            line-height: 64px;
        }

        #select_box {
            width: 900px;
            height: 100px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        #select_box .box-item {
            height: 100px;
            background-color: #5ac5fd;
            margin-left: 20px;
            text-align: center;
            float: left;
            line-height: 100px;
            display: block;
            box-sizing: border-box;
            border-radius: 10px;
            cursor: pointer;
        }
        #select_box .box-item:first-child {
            margin-left: 0;
        }
        #select_box .box-item:hover {
            background-color: #0092de;
        }
        #select_box .box-item p{
            clear: both;
            /* background-color: #3f66ff; */
            line-height: 100px;
            margin: 0;
            font-size: 26px;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="select_box" style="display: none"></div>
<div class="btn_area">
    <div id="btn_get" class="btn_get">取用</div>
    <div id="btn_back" class="btn_back">归还</div>
</div>
<div class="screen" style="display: {if !$full_screen_btn}none{/if}">
     <img src="/static/home/images/icon_close.svg" id="exit_sc" class="btn_exit_sc" data-state="0">
     <img src="/static/home/images/icon_fullscreen.svg" id="full_sc" class="btn_full_sc" data-state="0">
</div>

<div class="mask">
    <img src="/static/home/images/loading.gif" alt="识别中，请稍后">
</div>
<div class="result-mask">
    <div class="result">
        <div class="result-title">
            <div class="result-center">
                <img src="/static/home/images/door.png" alt="" class="door">
                <span id="door_state"></span>
            </div>
        </div>
        <div class="form-item">
            <div class="item-title">姓名</div>
            <div id="user_name" class="item-content"></div>
        </div>
        <div class="form-item">
            <div class="item-title">工号</div>
            <div id="user_serial" class="item-content"></div>
        </div>
        <div id="door_msg" class="msg"></div>
    </div>
</div>
</body>
<script>
$('#btn_get').on('click',function () {
    $('.mask').show();
    $.ajax({
        url:"{:url('index/work/opendoorbyiris')}",
        type:'post',
        data:{opt:'get'},
        success: function (ret) {
            let username = undefined !== ret.code ? ret.data.username : '';
            let user_serial = undefined !== ret.code ? ret.data.user_serial : '';
            if (ret.code === 0) {
                if ('请选择设备' === ret.msg) {
                    $('.mask').hide();
                    showDevicelist(ret.data.userid,ret.data.device,'get');
                    return true;
                }
                $('#door_state').text('已开门');
            }else{
                $('#door_state').text('开门失败');
            }
            $('#user_name').text(username);
            $('#user_serial').text(user_serial);
            $('#door_msg').text(ret.msg);
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        },
        error:function (e) {
            $('#door_state').text('开门失败');
            $('#door_msg').text('开门失败,请重试！');
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        }
    });
});
$('#btn_back').on('click',function () {
    $('.mask').show();
    $.ajax({
        url:"{:url('index/work/opendoorbyiris')}",
        type:'post',
        data:{opt:'back'},
        success: function (ret) {
            let username = undefined !== ret.code ? ret.data.username : '';
            let user_serial = undefined !== ret.code ? ret.data.user_serial : '';
            if (ret.code === 0) {
                if ('请选择设备' === ret.msg) {
                    $('.mask').hide();
                    showDevicelist(ret.data.userid,ret.data.device,'back');
                    return true;
                }
                $('#door_state').text('已开门');
            }else{
                $('#door_state').text('开门失败');
            }
            $('#user_name').text(username);
            $('#user_serial').text(user_serial);
            $('#door_msg').text(ret.msg);
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        },
        error:function (e) {
            $('#door_state').text('开门失败');
            $('#door_msg').text('开门失败,请重试！');
            $('#user_name').text('');
            $('#user_serial').text('');
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        }
    });
});
$('.result-mask').on('click',function () {
    $('.result-mask').hide();
    $('.btn_area').show();
});

$('#exit_sc').on('click',function () {
    exitScreen();

});
$('#full_sc').on('click',function () {
    fullScreen();
});

function showDevicelist(userid,device_list,opt) {
    var device_box = $('#select_box');
    device_box.text('');
    $.each(device_list, function (index, item) {
        device_box.append(
            "    <div class='box-item' onclick='get_this_device("+userid+","+item.id+",\""+opt+"\")' data-type='" + item.id + "'>\n" +
            "        <p>" + item.name + "</p>\n" +
            "    </div>"
        );
    });
    $('#select_box .box-item').css('width','calc((100% - 60px)/'+device_list.length);
    device_box.show();
}

function get_this_device(userid,cateid,opt) {
    $('#select_box').text('').hide();
    $('.mask').show();
    $.ajax({
        url:"{:url('index/work/open_door_by_choice')}",
        type:'post',
        data:{
            userid:userid,
            device_cate:cateid,
            opt:opt,
        },
        success: function (ret) {
            let username = undefined !== ret.code ? ret.data.username : '';
            let user_serial = undefined !== ret.code ? ret.data.user_serial : '';
            if (ret.code === 0) {
                $('#door_state').text('已开门');
            }else{
                $('#door_state').text('开门失败');
            }
            $('#user_name').text(username);
            $('#user_serial').text(user_serial);
            $('#door_msg').text(ret.msg);
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        },
        error:function (e) {
            $('#door_state').text('开门失败');
            $('#door_msg').text('开门失败,请重试！');
            $('.mask').hide();
            $('.btn_area').hide();
            $('.result-mask').show();
        }
    });

}

//全屏
function fullScreen(){
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    }
}
//退出全屏
function exitScreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    }
}
</script>
</html>